let movableAreaWidth = 0
let movableViewWidth = 0
const backgroundAudioManager = wx.getBackgroundAudioManager()
let currentSec = -1 //当前播放的秒数
let duration = 0 //歌曲总时长
let isMoving = false // 歌曲是否正在拖拽
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isSame: Boolean,
  },

  /**
   * 组件的初始数据
   */
  data: {
    showTime: {
      currentTime: '00:00',
      totalTime: '00:00',
    },
    movableX: 0,
    progressPercent: 0,
  },
  lifetimes: {
    ready() {
      this._getQueryRect()
      this._bindBgmEvent()
      if (this.properties.isSame && this.data.showTime.totalTime == '00:00') {
        this._getSongTime()
      }
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 监听movableView的移动事件
    movableChange(e) {
      // 当用户是手动拖动的时候
      if (e.detail.source == 'touch') {
        let moveX = e.detail.x
        this.data.progressPercent = moveX / (movableAreaWidth - movableViewWidth) * 100
        this.data.movableX = moveX
        isMoving = true
      }
    },
    // 手指松开完成拖动
    touchEnd() {
      const currentTime = this._transTime(Math.floor(backgroundAudioManager.currentTime))
      this.setData({
        progressPercent: this.data.progressPercent,
        movableX: this.data.movableX,
        ['showTime.currentTime']: currentTime
      })
      backgroundAudioManager.seek(duration * this.data.progressPercent / 100)
      isMoving = false
    },
    // 获取元素宽度
    _getQueryRect() {
      const query = this.createSelectorQuery()
      query.select('.movable-area').boundingClientRect()
      query.select('.movable-view').boundingClientRect()
      query.exec((res) => {
        movableAreaWidth = res[0].width
        movableViewWidth = res[1].width
      })
    },
    // 监听播放
    _bindBgmEvent() {
      backgroundAudioManager.onPlay(() => {
        console.log('onPlay')
        isMoving = false
        this.triggerEvent('onPlay')
      })
      backgroundAudioManager.onPause(() => {
        console.log('onPause')
        this.triggerEvent('onPause')
      })
      // 音乐能播放的时候
      backgroundAudioManager.onCanplay(() => {
        duration = backgroundAudioManager.duration
        if (typeof duration != 'undefined') {
          this._getSongTime()
        } else {
          setTimeout(() => {
            this._getSongTime()
          }, 1000)
        }
      })
      backgroundAudioManager.onEnded(() => {
        console.log('onEnded')
        this.triggerEvent('onEnded')
      })
      backgroundAudioManager.onWaiting(() => {
        console.log('onWaiting')
      })
      backgroundAudioManager.onTimeUpdate(() => {
        if (!isMoving) {
          const currentTime = backgroundAudioManager.currentTime
          duration = backgroundAudioManager.duration
          const currentTimeFmt = this._transTime(currentTime)
          const sec = currentTime.toString().split('.')[0]
          if (sec != currentSec) {
            const movableX = (movableAreaWidth - movableViewWidth) * currentTime / duration
            this.setData({
              movableX: movableX,
              progressPercent: currentTime / duration * 100,
              ['showTime.currentTime']: currentTimeFmt
            })
            currentSec = sec
          }
          this.triggerEvent('lyricTimeUpdate', {
            currentTime
          })
        }
      })
      backgroundAudioManager.onError(() => {
        console.log('onError')
      })
    },
    // 获取歌曲时长
    _getSongTime() {
      duration = backgroundAudioManager.duration
      const timeFmt = this._transTime(duration)
      this.setData({
        ['showTime.totalTime']: timeFmt
      })
    },
    // 歌曲时长换算成秒
    _transTime(time) {
      let min = this._timeFmt(Math.floor(time / 60))
      let sec = this._timeFmt(Math.floor(time % 60))
      return min + ":" + sec
    },
    // 补零
    _timeFmt(time) {
      return time < 10 ? '0' + time : time
    },
  }
})